<template>
  <div class="tournament_list">
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="gameTabList">
      <nut-tab-pane :title="item.name" :pane-key="item.id" v-for="item in gameTabList" :key="item.id">
        <div class="con_list" :style="contentStyle()">
          <nut-infinite-loading v-model="infinityValue" load-more-txt=" "
            :has-more="hasMore" @load-more="onLoad">
            <nut-empty v-if="tournamentList.length == 0" :description="t('nomore_data')"></nut-empty>
            <TournamentCard v-else :tournaments="tournamentList" />
          </nut-infinite-loading>
        </div>
        
      </nut-tab-pane>
    </nut-tabs>
    
    <LevitateBox />
  </div>
</template>

<script lang="ts" setup>
// @ts-nocheck
import { ref, reactive, onBeforeMount } from "vue";
import TournamentCard from "../components/tournamentCard.vue";
import LevitateBox from '../components/levitateBox.vue';

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import { useI18n } from "vue-i18n";
import { User } from "@/store/user";
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
const { appHeight } = storeToRefs(User(pinia));

const { t } = useI18n();
const state = reactive({
  // 游戏id  1为查看全部的游戏
  agentId: 0,
  page: 1  // 页码
})

const gameTabList = reactive([
  {
    id: 0,
    name: t('club_page_all'),
  },
  {
    id: 49,
    name: t('club_page_49'),
  },
  {
    id: 47,
    name: t('club_page_47'),
  },
  
]);

const contentStyle = () => {
  return window.matchMedia("(display-mode: standalone)").matches ||
    window.navigator.standalone
    ? { height: `calc(${appHeight.value}px - 160px)` }
    : { height: `calc(${appHeight.value}px - 160px)` };
};

const infinityValue = ref(false);
const hasMore = ref(true);
const params: any = reactive({
  // 参数
  pageSize: 25,
  page: 1,
});
const result: any = reactive({
  // 结果
  total_page: 0,
  gamblingList: [],
  tournamentList: []
});

// 赛事列表数据
const tournamentList:any = ref([]);

const tabChange = (item: any) => {
  state.agentId = item.paneKey
  getTorunametList()
}

const getTorunametList = async () => {
  //获取赛事列表
  const eventsList = NetPacket.req_tournament_events_list();
  eventsList.game_type = state.agentId
  eventsList.page = params.page
  eventsList.page_size = params.pageSize
  PKwebsocket.instance.send(eventsList, true, {
    callbackName: "msg_notify_tournament_events_list",
    callback: handleEventsList,
  });
}

const handleEventsList =  (res: any) => {
  tournamentList.value = res.tournm_list;
  result.tournamentList = [...result.tournamentList, ...res.tournm_list];
  if (res.tournm_list.length < params.pageSize) {
    hasMore.value = false;
  }
  infinityValue.value = false;
};

const onLoad = () => {
  params.page++;
  getTorunametList()
};

onBeforeMount( async() => {
  await getTorunametList()
})
</script>

<style scoped lang="scss">
.tournament_list {
  :deep(.nut-tabs__titles) {
    height: 36px;
  }
  .con_list {
    overflow: auto;
  }
}
</style>
